<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Begin Jekyll SEO tag v2.8.0 -->
<title>0029: Menus IV - The RadioMenuItem | gtkDcoding</title>
<meta name="generator" content="Jekyll v4.3.4" />
<meta property="og:title" content="0029: Menus IV - The RadioMenuItem" />
<meta name="author" content="Ron Tarrant" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="How to use a GTK RadioMenuItem - a D language tutorial." />
<meta property="og:description" content="How to use a GTK RadioMenuItem - a D language tutorial." />
<link rel="canonical" href="http://localhost:4000/posts/0029-radiomenuitem.html" />
<meta property="og:url" content="http://localhost:4000/posts/0029-radiomenuitem.html" />
<meta property="og:site_name" content="gtkDcoding" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2019-04-23T00:00:00-04:00" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="0029: Menus IV - The RadioMenuItem" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"Ron Tarrant"},"dateModified":"2019-04-23T00:00:00-04:00","datePublished":"2019-04-23T00:00:00-04:00","description":"How to use a GTK RadioMenuItem - a D language tutorial.","headline":"0029: Menus IV - The RadioMenuItem","mainEntityOfPage":{"@type":"WebPage","@id":"http://localhost:4000/posts/0029-radiomenuitem.html"},"url":"http://localhost:4000/posts/0029-radiomenuitem.html"}</script>
<!-- End Jekyll SEO tag -->
<link rel="stylesheet" href="../assets/main.css">
  <link rel="stylesheet" href="../css/style.css" /><link type="application/atom+xml" rel="alternate" href="http://localhost:4000/feed.xml" title="gtkDcoding" /></head>
<body><header class="site-header" role="banner">

  <div class="wrapper"><a class="site-title" rel="author" href="../">gtkDcoding</a><nav class="site-nav">
        <input type="checkbox" id="nav-trigger" class="nav-trigger" />
        <label for="nav-trigger">
          <span class="menu-icon">
            <svg viewBox="0 0 18 15" width="18px" height="15px">
              <path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
            </svg>
          </span>
        </label>

        <div class="trigger"><a class="page-link" href="../about.html">About</a><a class="page-link" href="../index-reverse.html">Posts in Date Order</a><a class="page-link" href="../topics.html">Blog Posts by Topic</a></div>
      </nav></div>
</header>
<main class="page-content" aria-label="Content">
      <div class="wrapper">
        <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
	<header class="post-header">
		<link rel="stylesheet" href="../css/font_size.css" />
		<link rel="stylesheet" href="../css/figure.css" />
		<link rel="stylesheet" href="../css/topics/menu.css" />  <!-- sub in the tag/topic -->
		<link rel="stylesheet" href="../css/modal.css" />
		<link rel="stylesheet" href="../css/post.css" />
		<link rel="stylesheet" href="../css/mascot_effects.css" />

		
		
		<p class="post-meta">
		<time class="dt-published" datetime="2019-04-23T00:00:00-04:00" itemprop="datePublished">Tuesday, April 23, 2019
		</time>• by <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="p-author h-card" itemprop="name">Ron Tarrant</span></span></p>
	</header>

	<div class="post-content e-content" itemprop="articleBody">
		<div class="skew-line"></div>
		<h1 id="0029-menus-iv---the-radiomenuitem">0029: Menus IV - The RadioMenuItem</h1>

<p>Today we start on <code class="language-plaintext highlighter-rouge">RadioMenuItem</code>s with a simple example. Next time, we’ll carry on with a second example, but with a more practical bent.</p>

<p>I said in an earlier post that <code class="language-plaintext highlighter-rouge">RadioButton</code>s are more complex than other <em>GTK</em> widgets. Well, <code class="language-plaintext highlighter-rouge">RadioMeniItem</code>s are too, but in different ways. Those differences start with inheritance.</p>

<p>Whereas the <code class="language-plaintext highlighter-rouge">RadioButton</code> inheritance chain looks like this:</p>

<ul>
  <li><code class="language-plaintext highlighter-rouge">Button</code> (great-grandparent),
    <ul>
      <li><code class="language-plaintext highlighter-rouge">ToggleButton</code> (grandparent), and
        <ul>
          <li><code class="language-plaintext highlighter-rouge">CheckButton</code> (parent),</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<p>the <code class="language-plaintext highlighter-rouge">RadioMenuItem</code> inheritance chain is shorter:</p>

<ul>
  <li><code class="language-plaintext highlighter-rouge">MenuItem</code> (grandparent), and
    <ul>
      <li><code class="language-plaintext highlighter-rouge">CheckMenuItem</code> (parent).</li>
    </ul>
  </li>
</ul>

<p>But this simply means that, like with <code class="language-plaintext highlighter-rouge">RadioButton</code>s, we have to manage mutual exclusion or we could end up with the whole set of radio items turned on (or off) at the same time. If that’s the functionality we need, we’d be better off with <code class="language-plaintext highlighter-rouge">CheckMenuItem</code>s. If you follow the methods laid out in the examples we look at this time and next, that won’t be a problem.</p>

<p>One to the first example…</p>

<h2 id="a-simple-radiomenuitem">A Simple RadioMenuItem</h2>

<div class="screenshot-frame">
	<div class="frame-header">
		Results of this example:
	</div>
	<div class="frame-screenshot">
		<figure>
			<img id="img0" src="../images/screenshots/012_menus/menu_11.png" alt="Current example output" />		<!-- img# -->
			
			<!-- Modal for screenshot -->
			<div id="modal0" class="modal">																	<!-- modal# -->
				<span class="close0">&times;</span>															<!-- close# -->
				<img class="modal-content" id="img00" />															<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal0");														// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img0");															// img#
			var modalImg = document.getElementById("img00");													// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close0")[0];											// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>
			<figcaption>
			Current example output
			</figcaption>
		</figure>
	</div>

	<div class="frame-terminal">
		<figure class="right">
			<img id="img1" src="../images/screenshots/012_menus/menu_11_term.png" alt="Current example terminal output" />		<!-- img#, filename -->

			<!-- Modal for terminal shot -->
			<div id="modal1" class="modal">																				<!-- modal# -->
				<span class="close1">&times;</span>																		<!-- close# -->
				<img class="modal-content" id="img11" />																		<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal1");																	// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img1");																		// img#
			var modalImg = document.getElementById("img11");																// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close1")[0];														// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>

			<figcaption>
				Current example terminal output (click for enlarged view)
			</figcaption>
		</figure>
	</div>

	<div class="frame-footer">																								<!-- ------------- filename (below) --------- -->
		The code file for this example is available <a href="https://github.com/rontarrant/gtkd_demos/blob/master/012_menus/menu_11_simple_radiomenuitems.d" target="_blank">here</a>.
	</div>
</div>

<p>If we look at the <code class="language-plaintext highlighter-rouge">MyRadioMenuItem</code> class, right off the bat we can see some differences in how the constructors are set up compared to the <code class="language-plaintext highlighter-rouge">CheckMenuItem</code>:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">class</span> <span class="n">MyRadioMenuItem</span> <span class="p">:</span> <span class="n">RadioMenuItem</span>
<span class="p">{</span>
	<span class="nb">string</span> <span class="n">message</span> <span class="p">=</span> <span class="s">"The setting state is: "</span><span class="p">;</span>
	
	<span class="k">this</span><span class="p">(</span><span class="n">ListSG</span> <span class="n">group</span><span class="p">,</span> <span class="nb">string</span> <span class="n">radioLabel</span><span class="p">)</span>
	<span class="p">{</span>
		<span class="k">super</span><span class="p">(</span><span class="n">group</span><span class="p">,</span> <span class="n">radioLabel</span><span class="p">);</span>
		<span class="n">addOnActivate</span><span class="p">(&amp;</span><span class="n">choose</span><span class="p">);</span>
		
	<span class="p">}</span> <span class="c1">// this()</span>
	
	
	<span class="kt">void</span> <span class="n">choose</span><span class="p">(</span><span class="n">MenuItem</span> <span class="n">mi</span><span class="p">)</span>
	<span class="p">{</span>
		<span class="kt">bool</span> <span class="n">radioMenuItemState</span><span class="p">;</span>
		
		<span class="n">radioMenuItemState</span> <span class="p">=</span> <span class="n">getActive</span><span class="p">();</span>
		
		<span class="k">if</span><span class="p">(</span><span class="n">radioMenuItemState</span> <span class="p">==</span> <span class="kc">true</span><span class="p">)</span>
		<span class="p">{</span>
			<span class="n">writeln</span><span class="p">(</span><span class="n">getLabel</span><span class="p">(),</span> <span class="s">" : active"</span><span class="p">);</span>
			<span class="n">workingCallback</span><span class="p">();</span>
		<span class="p">}</span>
		<span class="k">else</span>
		<span class="p">{</span>
			<span class="n">writeln</span><span class="p">(</span><span class="n">getLabel</span><span class="p">(),</span> <span class="s">" : inactive. "</span><span class="p">);</span>
		<span class="p">}</span>
	<span class="p">}</span>

	<span class="kt">void</span> <span class="n">workingCallback</span><span class="p">()</span>
	<span class="p">{</span>
		<span class="n">writeln</span><span class="p">(</span><span class="s">"Callback called from "</span><span class="p">,</span> <span class="n">getLabel</span><span class="p">());</span>
		
	<span class="p">}</span> <span class="c1">// workingCallback()</span>
	

<span class="p">}</span> <span class="c1">// class MyRadioMenuItem</span>
</code></pre></div></div>

<p>Firstly, this constructor is designed to build a generic <code class="language-plaintext highlighter-rouge">RadioMenuItem</code>  (as opposed to one with a function different from others in the same set) and to that end, it takes two arguments:</p>

<ul>
  <li>a <code class="language-plaintext highlighter-rouge">ListSG group</code>, and</li>
  <li>a string of label text.</li>
</ul>

<p>We’ll talk more about the group argument when we get to the <code class="language-plaintext highlighter-rouge">FileMenu</code> class.</p>

<p>And as for the callback, we’re looking at a different approach to signal handling. In the <code class="language-plaintext highlighter-rouge">RadioButton</code> example, all we had to do was react to the signal and our work was done. But with <code class="language-plaintext highlighter-rouge">RadioMenuItem</code>, we have to:</p>

<ul>
  <li>react to the signal,</li>
  <li>go find the state of the <code class="language-plaintext highlighter-rouge">RadioMenuItem</code>, and finally</li>
  <li>take action (or not) based on that state.</li>
</ul>

<h2 id="radiomenuitem-with-a-different-signal">RadioMenuItem with a Different Signal</h2>

<div class="screenshot-frame">
	<div class="frame-header">
		Results of this example:
	</div>
	<div class="frame-screenshot">
		<figure>
			<img id="img2" src="../images/screenshots/012_menus/menu_13.png" alt="Current example output" />		<!-- img# -->
			
			<!-- Modal for screenshot -->
			<div id="modal2" class="modal">																<!-- modal# -->
				<span class="close2">&times;</span>														<!-- close# -->
				<img class="modal-content" id="img22" />														<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal2");													// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img2");														// img#
			var modalImg = document.getElementById("img22");												// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close2")[0];										// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>
			<figcaption>
			Current example output
			</figcaption>
		</figure>
	</div>

	<div class="frame-terminal">
		<figure class="right">
			<img id="img3" src="../images/screenshots/012_menus/menu_13_term.png" alt="Current example terminal output" /> 		<!-- img#, filename -->

			<!-- Modal for terminal shot -->
			<div id="modal3" class="modal">																			<!-- modal# -->
				<span class="close3">&times;</span>																	<!-- close# -->
				<img class="modal-content" id="img33" />																	<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal3");																// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img3");																	// img#
			var modalImg = document.getElementById("img33");															// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close3")[0];													// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>

			<figcaption>
				Current example terminal output (click for enlarged view)
			</figcaption>
		</figure>
	</div>

	<div class="frame-footer">																							<!--------- filename (below) ------------>
		The code file for this example is available <a href="https://github.com/rontarrant/gtkd_demos/blob/master/012_menus/menu_13_simple_radiomenuitems_toggle.d" target="_blank">here</a>.
	</div>
</div>

<p>Note: The <code class="language-plaintext highlighter-rouge">onToggle</code> signal also works as can be seen in this bonus example which differs only in which signal is used.</p>

<p>Now let’s look at the <code class="language-plaintext highlighter-rouge">FileMenu</code> class…</p>

<h3 id="filemenu-class">FileMenu Class</h3>

<p>Here’s what it looks like:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">class</span> <span class="n">FileMenu</span> <span class="p">:</span> <span class="n">Menu</span>
<span class="p">{</span>
	<span class="n">MyRadioMenuItem</span> <span class="n">radioItem01</span><span class="p">,</span> <span class="n">radioItem02</span><span class="p">,</span> <span class="n">radioItem03</span><span class="p">;</span>
	<span class="n">ListSG</span> <span class="n">group</span><span class="p">;</span>
	
	<span class="k">this</span><span class="p">()</span>
	<span class="p">{</span>
		<span class="k">super</span><span class="p">();</span>
		
		<span class="n">radioItem01</span> <span class="p">=</span> <span class="k">new</span> <span class="n">MyRadioMenuItem</span><span class="p">(</span><span class="n">group</span><span class="p">,</span> <span class="s">"Radio 01"</span><span class="p">);</span>

		<span class="n">radioItem02</span> <span class="p">=</span> <span class="k">new</span> <span class="n">MyRadioMenuItem</span><span class="p">(</span><span class="n">radioItem01</span><span class="p">.</span><span class="n">getGroup</span><span class="p">(),</span> <span class="s">"Radio 02"</span><span class="p">);</span>
		<span class="n">radioItem03</span> <span class="p">=</span> <span class="k">new</span> <span class="n">MyRadioMenuItem</span><span class="p">(</span><span class="n">radioItem01</span><span class="p">.</span><span class="n">getGroup</span><span class="p">(),</span> <span class="s">"Radio 03"</span><span class="p">);</span>
		
		<span class="n">append</span><span class="p">(</span><span class="n">radioItem01</span><span class="p">);</span>
		<span class="n">append</span><span class="p">(</span><span class="n">radioItem02</span><span class="p">);</span>
		<span class="n">append</span><span class="p">(</span><span class="n">radioItem03</span><span class="p">);</span>
		
	<span class="p">}</span> <span class="c1">// this()</span>
	
<span class="p">}</span> <span class="c1">// class FileMenu</span>
</code></pre></div></div>

<p>We’ve worked with the <code class="language-plaintext highlighter-rouge">ListSG group</code> before, but perhaps without realizing it. If you look back at <a href="https://github.com/rontarrant/gtkd_demos/blob/master/002_button/button_13_radiobutton.d">the example code for a RadioButton</a>, you’ll see that the group is not named up front like it is here. Instead, it’s declared and defined somewhere in the inner workings of the first <code class="language-plaintext highlighter-rouge">RadioButton</code>’s constructor and we only see it as a member of the <code class="language-plaintext highlighter-rouge">radioItem01</code> object.</p>

<p>But, in the current case, a non-instantiated <code class="language-plaintext highlighter-rouge">ListSG group</code> is declared in the <code class="language-plaintext highlighter-rouge">FileMenu</code> object (which is coming up next in this discussion) and passed along to the super-class’s constructor. Internally, as far as the super-class is concerned, nothing’s all that different. It still does the heavy lifting and it still stores <code class="language-plaintext highlighter-rouge">group</code> as a member variable in <code class="language-plaintext highlighter-rouge">radioItem01</code>. The only thing that changed was how the <code class="language-plaintext highlighter-rouge">group</code> variable started out. In the earlier example, it was created by the super-class. This time, it starts as a local variable here in the <code class="language-plaintext highlighter-rouge">FileMenu</code> object.</p>

<p>And is there a difference? Not really. It’s just another option. In fact, you may think you can pass <code class="language-plaintext highlighter-rouge">group</code> as an argument to <code class="language-plaintext highlighter-rouge">radioItem02</code> and <code class="language-plaintext highlighter-rouge">radioItem03</code>, but if you do, their constructors assume it’s undefined and overwrite it. The result is that you end up with each <code class="language-plaintext highlighter-rouge">RadioMenuItem</code> in its own private group instead of being part of a set.</p>

<p><em>Aside: This process of passing an undefined group to the first <code class="language-plaintext highlighter-rouge">RadioMenuItem</code> also works with <code class="language-plaintext highlighter-rouge">RadioButton</code> as can be seen in <a href="https://github.com/rontarrant/gtkd_demos/blob/master/002_button/button_17_pregroup_radiobuttons.d">this bonus code example</a>. Look in these areas to see the changes:</em></p>

<ul>
  <li>the import statements for <code class="language-plaintext highlighter-rouge">import glib.ListSG</code>,</li>
  <li>the <code class="language-plaintext highlighter-rouge">RadioBox</code> class, and</li>
  <li>the <code class="language-plaintext highlighter-rouge">MyRadioButton</code> class.</li>
</ul>

<p>And that’s it for this time, but we’ll be back with the practical example on Tuesday. See you then.</p>

<div class="blog-nav">
	<div style="float: left;">
		<a href="./0028-checkmenuitems.html">Previous: CheckMenuItem</a>
	</div>
	<div style="float: right;">
		<a href="./0030-radiomenuitem-practical.html">Next: Practical RadioMenuItem</a>
	</div>
</div>
<p>
	<h3></h3>
<div class="inpage-frame">
	<a href="https://github.com/sponsors/rontarrant">
		<BR>
		<BR>
		<B>Is this article useful? Educational? Entertaining, perhaps?</B>
		<BR>
		<figure class="left">
			<img src="../images/favorite_32.png" alt="Sponsorship heart" style="width: 32px; height: 32px;">
		</figure>
		You're free to accept or decline this invitation to become our newest sponsor.
	</a>
</div>
	<h4 class="comment-blurb"><B>Comments? Questions? Observations?</B></h4>
	<p>
		Did we miss a tidbit of information that would make this post even more informative? Let's talk about it in the comments.
	</p>
	<script src="https://utteranc.es/client.js"
		repo="rontarrant"
		issue-term="pathname"
		theme="github-light"
		crossorigin="anonymous"
		async>
	</script>
	<ul>
		<li> come on over to the <a href="https://forum.dlang.org/">D Language Forum</a> and look for one of the <i>gtkDcoding</i> announcement posts, </li>
		<li> drop by <a href="https://forum.gtkd.org/">the <i>GtkD Forum</i></a>,</li>
		<li> follow the link below to email me, or</li>
		<li> go to the	<a href="https://www.facebook.com">gtkDcoding Facebook page.</a></li>
	</ul>
</p>
<p> You can also subscribe <a href="/feed.xml">via RSS</a> so you won't miss anything. Thank you very much for dropping by.</p>
<p>&copy; Copyright 2025 Ron Tarrant </p>
</div>

	<a class="u-url" href="./0029-radiomenuitem.html" hidden></a>
</article>

      </div>
    </main><footer class="site-footer h-card">
  <data class="u-url" href="/"></data>

  <div class="wrapper">

    <h2 class="footer-heading">gtkDcoding</h2>

    <div class="footer-col-wrapper">
      <div class="footer-col footer-col-1">
        <ul class="contact-list">
          <li class="p-name">Ron Tarrant</li><li><a class="u-email" href="mailto:gtkDcoding@gmail.com">gtkDcoding@gmail.com</a></li></ul>
      </div>

      <div class="footer-col footer-col-2"><ul class="social-media-list"><li><a href="https://github.com/rontarrant"><svg class="svg-icon"><use xlink:href="../assets/minima-social-icons.svg#github"></use></svg> <span class="username">rontarrant</span></a></li></ul>
</div>

      <div class="footer-col footer-col-3">
        <p>Simple examples of how to use GtkD to build GUI applications.</p>
      </div>
    </div>

  </div>

</footer>
</body>

</html>
